Charles 是在電腦上運行的 Web Proxy (HTTP Proxy / HTTP Monitor),很多時候我們需要帶入參數、返回的 response、查看 request 的各種 header、協議、響應時間等等
Charles 通過將自己設置為系統的網絡訪問代理服務器,這樣所有的 request 都會通過它,從而實現截獲和分析。
Chareles 不僅可以分析電腦本機的網絡請求(HTTP和HTTPS),還可以分析手機端的 request
簡單定義的話,charles 就是一個抓包工具,但!什麼是抓包?
瀏覽器開啟 devtool,點擊 Network 後,會看一系列的資訊,那些資訊就是所謂的【封包】。
封包的內容不僅限於 API,連同 jpg/png/js/css/json 等等多種檔案,只要可以讓瀏覽器對該網站進行渲染完成的資訊,都是【封包】。
客戶端對伺服器端進行溝通資料傳遞時,過程中間多了一位程咬金,會取得任一封包後,可以攔截且自行修改任一參數值後,再回傳給 server 端,就可以偽造是 user 的操作
所以這種操作手法也很容易出現是駭客的操作手法之一。
當使用電腦端的瀏覽器時,按照上方圖片說明,是可以非常容易取得且查看封包的,並且可以直接進行測試或者程式相關撰寫。
但針對手機端時就會無法重現,因為手機端的瀏覽器是無法輕易打開 devtool
但這時候又需要取得手機 封包才能進行測試時,該怎麼辦?
看完上方的介紹後,相信大家都了解了 charles 就是一個抓包的工具。
可以使用 WebProxy(HTTP Proxy / HTTP Monitor) ,透過代理伺服器(Proxy Server)機制,瀏覽器或其他有透過網路的應用程式,將透過設定 Charles 顯示或記錄所有的發送或接收的數據
Charles 主要的功能包括:
WebProxy(HTTP Proxy / HTTP Monitor) 、Proxy Server 等專有名詞
若有不懂的請先自行 google 大致了解一下即可,此篇不細講
安裝太簡單了,不多做說明,就依照自己電腦的系統自行下載並安裝即可。
【Windows Proxy】 通常預設都會自動打勾,表示會自動抓取電腦 web 上的封包。
(此文章主要以抓 app 封包為主,所以可以先將它取消打勾)
通常這欄位名稱會依照電腦系統不同而有所改變,但實際上效果都是一樣的
【Proxy Settings…】就是在設定 代理伺服器(Proxy) 的部分,點擊開啟視窗後,將會看到以下畫面
【Port】 可以自行決定,只要與手機的網路的代理伺服器設定相同即可(通常使用預設 8888 就行了),稍後下面會細講到手機的 proxy 設定。
【Support HTTP/2】勾選表示支援 HTTP/2 協定。詳細可參考: Http/2 是什麼?、你的網站升級到 HTTP/2 了嗎?
【Enable transparent HTTP proxying】勾選則表示 charles 開啟代理的角色。
【SSL Proxy Settings】主要是設定 HTTPS 的封包可以進行撈取。
【Add】新增你要的 host 網域、port 號,若設定 * 則表示全部網址、port 號都可以。
【SSL Proxying】這部分主要是可以設定限制某網域、某 port 號指定抓包,則表示所有網站的封包都會抓以
【Enable SSL Proxying】設定要啟用 SSL Proxying,主要是可以針對 HTTPS 的封包進行撈取
若此部分未設定可能封包回傳的內容都會顯示亂碼,或是撈不到資料
通常第一筆就會是你的 IP位置了
若仍然不太確定的話可以開啟你的 cmd(windows系統)/terminal(mac統),輸入 ipconfig
也可以查詢到你的 ip 位置
這 IP 位置很重要,稍後手機設定時,就會需要使用到
這部分需要安裝好 CA(憑證)才行
電腦需安裝(Install Charles Root Certificate)
windwos 安裝步驟
(若已正確安裝人,文字則會顯示上方原來的文字)
看到此畫面表示已經安裝完成了~
mac 安裝步驟
看到此畫面表示已經安裝完成了~
先找到你目前連線的 Wifi,點擊【設定代理伺服器】,並點擊並開啟詳細的設定(如上圖)
切換成【手動】後
手機需安裝(Install Charles Root Certificate on a Mobile Device Remote Browser)
記住需讓電腦與手機使用【相同網路】
然後開啟在手機瀏覽器中輸入 chls.pro/ssl
就可以下載憑證,並且直接安裝
手機安裝步驟
點擊 設定 → 一般 → 關於本機 → (畫面拉到最下面)憑證信用設定 → 開啟 charles 憑證
可參考:https://juejin.cn/post/6967317908351352845
設定成功後,預期為像是以下這樣,封包內的資料都可以順利取得。